<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >
    <meta name="keywords" content="个人作品,个人简历展示">
    <meta name="description" content="个人作品,个人简历展示">
    <title>首页 | </title>
    <!-- Bootstrap -->
    <link rel="icon" type="image/png" href="images/main/ico.png">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.min.css"/>
</head>
<body style="padding-top:0">
<div id="pageGround">
    <img src="images/main/circle.gif" alt="loading icon" />
</div>
<!--头部导航开始-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand"><img src="images/main/logo.png"></a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.html">首页</a></li>
                <li><a href="project.html">项目案例</a></li>
                <li><a href="profile.html">个人简介</a></li>
                <li><a href="contact.html">联系方式</a></li>
            </ul>
        </div>
    </div>
</nav>
<section class="banner">
    <div id="owl-demo" class="owl-carousel owl-theme" style="opacity: 1;display: block;">
        <div class="item" style="background-image: url('images/main/banner/banner1.jpg')">
            <div class="mask"></div>
            <div class="title">
                <h3> sketch</h3>
                <h5>一款优秀的设计软件，让ui设计更简单，更高效.</h5>
            </div>
        </div>
        <div class="item" style="background-image: url('images/main/banner/banner2.jpg')">
            <div class="mask"></div>
            <div class="title">
                <h3> bootstrap</h3>
                <h5>简洁、直观、强悍的前端开发框架，迅速开发出多终端适配的网站.</h5>
            </div>
        </div>
        <div class="item" style="background-image: url('images/main/banner/banner3.jpg')">
            <div class="mask"></div>
            <div class="title">
                <h3> html5</h3>
                <h5>html5+css3现代化、响应式、多终端适配网页</h5>
            </div>
        </div>
    </div>
</section>
<!-- news -->
<section class="introduce">
    <h1 class="text-center title">INTRODUCE</h1>
    <div class="container">
        <div class="row">
            <div class="com-xs-12 text-center">
                <img width="121" height="140" src="images/main/myself.png" data-src="images/main/myself.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="images/main/myself.png 121w, images/main/myself.png 100w" sizes="(max-width: 121px) 100vw, 121px" /><noscript><img width="121" height="121" src="images/main/myself.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="images/main/myself.png 121w, images/myself.png 100w" sizes="(max-width: 121px) 100vw, 121px" /></noscript>                </div>
        </div>
        <div class="row">
            <div class="col-sm-offset-2 col-sm-8 text-center">
                <h4>hi，我是张浩，是一名前端工程师，专注于小程序，原生JS与响应式设计，搭建前端自动化流程</h4>
            </div>
        </div>
        <div class="row ">
            <div class="col-xs-6 text-right">
                <a class="a-link text-center" href="profile.html"><span>个人简介</span></a>
            </div>
            <div class="col-xs-6 text-left">
                <a class="a-link text-center" href="project.html"><span>项目作品</span></a>
            </div>
        </div>
    </div>
</section>
<!-- /.news -->
<!-- about -->
<section id="service">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6 col-sm-3">
                <div class="mask-item text-center">
                    <div class="idea-icon"><i class="fa fa-lightbulb-o fa-4x"></i></div>
                    <h3>IDEA</h3>
                    <p>源于自然，源于标准，剖析行业本质，解决客户需求点</p>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3">
                <div class="mask-item text-center">
                    <div class="idea-icon"><i class="fa fa-pencil-square-o fa-4x"></i></div>
                    <h3>DESIGN</h3>
                    <p>紧随时代潮流，源于国外的设计理念，制作出高水准的设计</p>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3">
                <div class="mask-item text-center">
                    <div class="idea-icon"><i class="fa fa-code fa-4x"></i></div>
                    <h3>CODE</h3>
                    <p>用bootstrap框架搭建响应式网站,让研发快人一步</p>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3">
                <div class="mask-item text-center">
                    <div class="idea-icon"><i class="fa fa-jsfiddle fa-4x"></i></div>
                    <h3>ACTION</h3>
                    <p>阿里云自动部署，简单、高效、稳定兼容性强、容错率高，运行速度快</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /.about -->
<!-- project -->
<section class="project">
    <div class="container">
        <div class="row text-center">
            <div class="col-sm-12">
                <h1 class="title">PROJECT</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center">
                <h4 style="margin-bottom: 50px;">主要做PC端,手机移动端动静态页面以及响应式网站</h4>
            </div>
        </div>
        <div class="row mar-bot40" style="overflow: hidden">
            <div class="col-md-3 col-xs-6 thumb">
                <a href="project.html">
                    <div class="thumb-wrap">
                        <div class="over-hid rel">
                            <div class="mask"><i class="fa fa-link fa-3x"></i></div>
                            <img class="img-responsive" src="images/main/project/small-routine.png"/>
                        </div>
                        <div class="describe text-center">
                            微信小程序
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-xs-6 thumb">
                <a href="project.html">
                    <div class="thumb-wrap">
                        <div class="over-hid rel">
                            <div class="mask"><i class="fa fa-link fa-3x"></i></div>
                            <img class="img-responsive" src="images/main/project/office.png"/>
                        </div>
                        <div class="describe text-center">
                            办公页面
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-xs-6 thumb">
                <a href="project.html">
                    <div class="thumb-wrap">
                        <div class="over-hid rel">
                            <div class="mask"><i class="fa fa-link fa-3x"></i></div>
                            <img class="img-responsive" src="images/main/project/bootsrap.png"/>
                        </div>
                        <div class="describe text-center">
                            Bootstrap响应式页面
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-xs-6 thumb">
                <a href="project.html">
                    <div class="thumb-wrap">
                        <div class="over-hid rel">
                            <div class="mask"><i class="fa fa-link fa-3x"></i></div>
                            <img class="img-responsive" src="images/main/project/CC-shopping.png"/>
                        </div>
                        <div class="describe text-center">
                            CC商城
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center"><a class="a-link" href="project.html"><span>更多案例</span></a></div>
        </div>
    </div>
</section>
<!-- /.project -->

<footer id="footer">
    <div class="container">
        <div class="row text-center ">
            <div class="rel relL">
                <a href="#">
                    <i class="fa fa-qq fa-3x"></i>
                    <div class="tip tip1">
                        <img  class="img" src="images/main/qq.png" alt="">
                    </div>
                </a>
            </div>
            <div class="rel relR">
                <a href="#">
                    <i class="fa fa-weixin fa-3x"></i>
                    <div class="tip tip2">
                        <img  class="img" src="images/main/weixin.png" alt="">
                    </div>
                </a>
            </div>
        </div>
        <div class="row text-center font">
            <div class="col-md-2 col-md-offset-2">电话：17000215771</div>
            <div class="col-lg-4 col-md-4">地址：深圳市龙华新区油园新村</div>
            <div class="col-lg-3 col-md-3">邮箱：dilsm56@foxmail.com</div>
        </div>
    </div>
    <div class="footer-copyright">
        <span>©2017&nbsp;&nbsp; &nbsp;&nbsp;dilsm56&nbsp;&nbsp; &nbsp;&nbsp;</span><span href="#">SITY BY:张浩 &nbsp;&nbsp;</span><span class="hidden-xs">京ICP备14057442号</span>
    </div>
</footer>
</body>
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/1.4.2-respond.min.js"></script>
<![endif]-->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/ee.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

<script src="js/main.min.js"></script>
</html>